<template>
	<div class="bk">
		<div v-for="item in hotBooks" :key="item.id" class="bookm">
			<div class="bookg">
				<div class="bookimg" @click="booksq(item.id)">
					<el-image fit="cover" :src="`http://127.0.0.1/api/public/showimg/${item.pic}`">
					</el-image>
				</div>
			</div>
			<div class="booke">
				<div class="bookname" @click="booksq(item.id)">
					<p>
						书名:{{item.name}}
					</p>
					<p>
						价格:{{item.price}}
					</p>
				</div>
				<div class="addcart">
					<p>
						<a @click="add2Cart(item.id)">
							<i class='el-icon-shopping-cart-full'></i>
							加入购物车
						</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PCHotbook',
		data() {
			return {
				hotBooks: [],
			}
		},
		methods: {
			add2Cart(bookid) {
				this.$get("/api/public/addCart/" + bookid).then((res) => {
					if (res.code == 200) {
						this.$message.success(res.data.msg);
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			gethotbooks() {
				this.$get("/api/public/book/findTopSale/5").then(resp => {
					console.log("获取最热门书籍 5 本5本书")
					this.hotBooks = resp.data.data;
					console.log(this.hotBooks)
				})
			},
			booksq(bookid){
				this.$router.push('/pc/booksdeta?&book_id='+bookid);
			}
		},
		mounted() {
			this.gethotbooks();
		}
	}
</script>

<style scoped>
	.bk {
		width: 90%;
		height: 100%;
		overflow: hidden;
		border: 1px solid #d9deff;
	}

	.bk .bookm {
		width: 100%;
		height: 75px;
		display: flex;
		margin-bottom: 3px;
	}

	.bk .bookg {
		border-radius: 3px;
		width: 60px;
		height: 60px
	}

	.bk .bookimg {
		width: 50px;
		height: 50px;
		overflow: hidden;
		border: 1px solid lightgrey;
		border-radius: 25px;
		cursor: pointer;
	}

	.bk .booke {
		margin-left: 3px;
		width: 70%;
	}

	.bk .bookname {
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}

	.bk .bookname p {
		color: #606266;
		font-size: 14px;
		font-weight: 800;
		overflow: hidden;
	}

	.bk .addcart {
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}

	.bk .addcart p {
		width: 100%;
		background-color: white;
		font-size: 14px;
		color: red;
	}
</style>